<template>
  <div class="material-releases-label">
    <div class="content-operations">
      <div class="flex-pops">
        <div @click="closePop">取消</div>
        <div class="title">添加标签</div>
        <div class="click-release" @click="releaseClick()">确定</div>
      </div>
      <div class="set-label" style="width: 100%">
        <input class="label-input" v-model="label" @keyup.enter="addLabel" maxlength="6" placeholder="请输入标签名称" />
        <div class="add-label" @click="addLabel"> + 添加标签</div>
        <div class="tips">建议每个标签最多填写6个字</div>
      </div>
    </div>
    <div class="all-label">
      <div class="label-title">全部标签</div>
      <div v-if="labelList.length == 0">
        <no-data :noData="noData"></no-data>
      </div>
      <template v-else>
      <div class="show-label">
        <div v-for="(item, index) in labelList" :key="index" @click="deleteLable(index)">{{item}}<img src="https://img.wifenxiao.com/h5-wfx/images/icon_close.png"/></div>
      </div>
      </template>
    </div>

  </div>
</template>
<script>
import addLabel from './addLabel'
import noData from '@/components/noData/index'

export default {
  components: {
    addLabel,
    noData
  },
  props: {
    labelBefore: {
      type: Array,
      default: []
    },
    num: {
      type: Number,
      default: 0
    },
    labelPop: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      labelList: [],
      label: '',
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/commentList/no_evaluate.png',
        text: '暂未添加标签',
        marginTop: '0px'
      }
    }
  },
  watch: {
    num: {
      handler(val) {
        if (this.labelPop) {
          this.labelList = [...this.labelBefore]
        }
      },
      immediate: true
    }
  },
  methods: {
    closePop() {
      this.$emit('success', 'close')
    },
    releaseClick() {
      this.$emit('success', this.labelList)
    },
    deleteLable(index) {
      this.labelList.splice(index, 1)
    },
    addLabel() {
      if (this.label == '') {
        this.$Error('请输入标签名称')
        return
      }
      this.labelList.push(this.label)
      this.label = ''
    }
  }
}
</script>
<style lang="scss">

.material-releases-label {
  padding: 84px 24px 24px;
  .content-operations {
    background: #f1f1f1;
    font-size: 28px;
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 10;
    height: 244px;
    .flex-pops {
      padding: 24px 24px 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 84px;
      .click-release {
        background: #FF2A40;
        color: #fff;
        padding: 16px 20px;
        border-radius: 8px;
        font-weight: 400;
      }
      .title {
        font-size: 30px;
        font-weight: 500;
      }
    }
    .set-label {
      margin-top: 20px;
      position: relative;
      .add-label {
        position: absolute;
        right: 30px;
        top: 10px;
        height: 60px;
        line-height: 55px;
        padding: 0 20px;
        border: 1px solid #FF2A40;
        border-radius: 40px;
        color: #FF2A40;
      }
      .label-input {
        background: #fff;
        width: 100%;
        // height: 80px;
        line-height: 120px;
        padding: 0px 220px 0px 30px;
        font-size: 28px;
      }
      .tips {
        margin: 10px 20px;
        font-size: 20px;
        color: #999999;
      }
    }
  }
  .all-label {
    padding-top: 160px;
    .label-title {
      font-size: 24px;
      color: #999;
      position: relative;
      // left: -10px;
    }
    .show-label {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      div {
        // border: 1px solid #FF2A40;
        background: #FFECE8;
        color:#FF2A40;
        border-radius: 30px;
        margin: 20px 20px 0 0;
        padding: 10px 20px;
        font-size: 24px;
        font-weight: 500;
        img {
          width: 20px;
          height: 20px;
          margin-left: 10px;
          position: relative;
          top: 2px;
        }
      }
    }
  }

}
</style>